<template>
  <div id="chart">
    <div class="sub-title">{{ $t('danPinGuanZhuDuPaiHang') }}</div>
    <!-- <dv-charts :option="option" /> -->
    <echarts-new
      class="charts-container"
      :option-data="option"
      :styles="style"
      height="100%"
      width="100%"
      v-if="option"
    ></echarts-new>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import echartsNew from '@/components/echartsNew/index';
export default {
  name: 'lbChart',
  components: {
    echartsNew,
  },
  data() {
    return {
      style: { height: '100%' },
      option: {
        color: ['#fff'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
          },
        },
        grid: {
          left: '0%',
          right: '4%',
          bottom: '3%',
          containLabel: true,
        },
        xAxis: {
          type: 'value',

          axisTick: {
            show: false,
          },
          axisLine: {
            style: {
              stroke: '#6C8097',
              lineWidth: 1,
            },
          },
          axisLabel: {
            style: {
              fill: '#D0DEEE',
              fontSize: 12,
              rotate: 0,
            },
          },
          splitLine: {
            show: false,
          },
        },
        yAxis: {
          data: [
            'TINECO CD2142-01 Красный фен',
            'dreame AHD7-RS Золотистый фен',
            'Черная сковорода вок 6-го поколения KGH-J28A',
            'BUYDEEM K203 розовый электрочайник 1,2 л',
            'AUX NSC-200-11A1 черный обогреватель',
            'AIRMATE HU1118-2 Белый обогреватель',
            'Deli GA511 Черный уничтожитель бумаги',
          ],
          name: this.$t('wanRenCi'),
          type: 'category',
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisLabel: {
            color: '#D0DEEE',
            fontSize: 12,
            width: 200,
            overflow: 'truncate',
          },
          splitLine: {
            show: false,
          },
          nameTextStyle: {
            fill: '#6C8097',
            fontSize: 12,
          },
        },
        series: [
          {
            data: [1200, 2230, 1900, 2100, 3500, 4200, 3985],
            type: 'bar',
            gradient: {
              color: ['#0B101E', '#159AFF'],
            },
            label: {
              show: true,
            },
            itemStyle: {
              normal: {
                // barBorderRadius: 30,
                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                  {
                    offset: 0,
                    color: 'rgb(57,89,255,0)',
                  },
                  {
                    offset: 1,
                    color: '#159AFF',
                  },
                ]),
              },
            },
            barWidth: 16,
          },
        ],
      },
    };
  },
  methods: {},
  mounted() {},
};
</script>

<style lang="scss" scoped>
#chart {
  width: 100%;
  height: 100%;
  box-sizing: border-box;

  .dv-charts-container {
    height: calc(100% - 50px);
  }
  .charts-container {
    height: calc(100% - 50px);
  }
}
</style>
